<template>
  <!--传递给父组件内容， 父组件用props接收-->
  <div class="AnswerContainer">

    <div v-if="fatherData == 'home'">
     <el-row>
       <h3>智力答题大赛</h3>
       <el-button type="success" @click="startAnswer">开始</el-button>
     </el-row>
    </div>

    <div v-else-if="fatherData == 'item'">
      <h4>{{itemDetail[itemNum-1].answer_index}}</h4>
      <p>{{itemDetail[itemNum-1].answer_title}}</p>
      <el-radio-group  v-model="itemDetail[itemNum-1].userChoose">
         <el-radio :label="item.options_id"
                   :key="item.options_id"
                   @change="choosed(item.options_id)"
                   v-for="(item, index) in itemDetail[itemNum-1].options_list">
           {{item.options_title}}
         </el-radio>
      </el-radio-group>

      <!--最后一题显示提交按钮-->
      <div v-if="itemNum == itemDetail.length ">
        <el-button type="success" @click="submitFun">提交</el-button>
      </div>
      <div v-else>
        <el-button type="success" @click="nextFun">下一题</el-button>
      </div>
    </div>
  </div>
</template>

<script>

import { mapState,mapActions  } from 'vuex'

export default {
  name: 'AnswerContainer',
  data () {
    return {
      choosedResult: null, //当前选择的题号
    }
  },

  props:['fatherData'],

  computed:mapState([
    'itemNum', 'itemDetail'
  ]),

  methods:{
    ...mapActions([
      'addNum', 'initData',
    ]),
    //开始答题
    startAnswer(){
      this.$router.push('item')
    },
    submitFun(){
      if (this.choosedResult == null){
        alert("没有选择答案");
      }else {
        this.addNum(this.choosedResult); //将当前选中的结果添加到答题记录中
        this.$router.push('score');

        this.choosedResult = null;
      }
    },
    nextFun(){
      //没有选校验
      if (this.choosedResult == null){
        alert("没有选择答案");
      }else{
        this.addNum(this.choosedResult); //将当前选中的结果添加到答题记录中
        this.choosedResult = null;
      }
    },
    choosed(choosedResult){
      this.choosedResult = choosedResult;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
